<%@page import="com.mconnect.msurvey.controller.PlanManager"%>
<%@page import="com.mconnect.msurvey.model.User"%>
<%@page import="com.mconnect.msurvey.model.Responder"%>
<%@page import="com.mconnect.msurvey.controller.ResponderManager"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<style>
            .errorMessage{
	  		color: red;
	  		font-style: italic;
	  		font-size: large;
	  		}
	  		
	  		.ui-accordion-content{
	  			height: 200px;
	  		}
	  		
	  		div#users-contain { width: 350px; margin: 20px 0; }
			div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
			div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
			
			table.center{
				margin:0 auto;
			}
			div.center{
				margin:0 auto;
				text-align: center;
				
			}
</style>
<!-- <SCRIPT type="text/javascript" src="js/validationForm.js" charset="UTF-8"> </SCRIPT> -->
<script src="js/jQuery/jquery-1.8.2.js"></script>
	<script src="js/jQuery/external/jquery.bgiframe-2.1.2.js"></script>
	<script src="js/jQuery/ui/jquery.ui.core.js"></script>
	<script src="js/jQuery/ui/jquery.ui.widget.js"></script>
	<script src="js/jQuery/ui/jquery.ui.mouse.js"></script>
	<script src="js/jQuery/ui/jquery.ui.button.js"></script>
	<script src="js/jQuery/ui/jquery.ui.draggable.js"></script>
	<script src="js/jQuery/ui/jquery.ui.position.js"></script>
	<script src="js/jQuery/ui/jquery.ui.resizable.js"></script>
	<script src="js/jQuery/ui/jquery.ui.dialog.js"></script>
	<script src="js/jQuery/ui/jquery.ui.effect.js"></script>
	<script src="js/jQuery/ui/jquery.ui.accordion.js"></script>
	
	<link rel="stylesheet" href="resources/css/ap.css">
	  <link rel="stylesheet" href="js/jQuery/demos.css">
	  <link rel="stylesheet" href="js/jQuery/themes/base/jquery.ui.all.css">
	  <link type="text/css" href="js/jQuery/css/smoothness/jquery-ui-1.8.17.custom.css" rel="Stylesheet" />
	  <link rel="stylesheet" href="resources/css/detail_style.css">

<script type="text/javascript">
$(function(){
	$.fx.speeds._default = 200; 
	$( "#recomendContent_dialog" ).dialog({ 
			autoOpen: true,
			width: 1000,
			minWidth: 1000,
			height: 800,
			show: "explode",	
			hide: "explode"	,
			close: function (){
				$('.ui-dialog').remove();
			}
	}); 
	$( "#opener" ).click(function() {	
		$( "#recomendContent_dialog" ).dialog( "open" );	
		return false; 
	}); 
	
	$(function() {
		$( "#accordion" ).accordion();
	});
	
	$('#cancelSurvey').click(function(){
		$("#recomendContent_dialog").dialog('close');
		return false;
	});
	
	$('#saveSurvey').click(function(){
		
		question1 = $('input[name="questions.question1"]:checked', '#r_question1').val();
		question2 = $('input[name="questions.question2"]:checked', '#r_question2').val();
		question6 = $('input[name="questions.question6"]:checked', '#r_question6').val();
		question3 = $('input[name="questions.question3"]:checked', '#r_question3').val();
		question5 = $('input[name="questions.question5"]:checked', '#r_question5').val();
		question4 = $('input[name="questions.question4"]:checked', '#r_question4').val();
		
			
		callCenter = 'NIE';
		it = 'NIE';
		telecomunication = 'NIE';
		publicRelation = 'NIE';
		sale = 'NIE';
		if($('#p5check1').is(':checked')){
			callCenter = 'TAK';
		}
		if($('#p5check2').is(':checked')){
			it = 'TAK';
		}
		if($('#p5check3').is(':checked')){
			telecomunication = 'TAK';
		}
		if($('#p5check4').is(':checked')){
			publicRelation = 'TAK';
		}
		if($('#p5check5').is(':checked')){
			sale = 'TAK';
		}
		agree = 'NIE';
		if($('#pyt9c').is(':checked')){
			agree = 'TAK';
		}
		
		var phoneStr = '';
		id_recommend = $('#id_recommend').val();
		firstname = $('#firstname').val();
		lastname = $('#lastname').val();
		mail = $('#mail').val();
		phone = $('#phone').val();
		_id_user = $('#id_user').val();
		_id_plan = $('#r_id_plan').val();
		id_userRecommend = $('#id_userRecommend').val();
		var recommendTab = $('#recommendTable :input').serializeArray();
		var dataString = {
				'questions.question1' : question1, 'questions.question2' : question2,  'questions.question3' : question3,  'questions.question4' : question4,  'questions.question5' : question5, 'questions.question6' : question6,
				'category.callCenter' : callCenter, 'category.it' : it, 'category.telecomunication' : telecomunication, 'category.publicRelations' : publicRelation, 'category.sale' :sale, 'id_recommend' : id_recommend,
				'responder.firstname' : firstname, 'responder.lastname' : lastname, 'responder.phone' : phone, 'responder.mail' : mail, 'id_user' : _id_user, 
				'survey.agree' : agree, 'survey.id_userRecommend' : id_userRecommend, 'id_plan' : _id_plan 
			};
		var check = false;
		
		for(var i in recommendTab){
			
		    var nazwa = recommendTab[i].name;
		    if(typeof dataString[nazwa] == 'undefined'){
		    	dataString[nazwa] = new Array();
		    }
		    	
		    var ilosc = dataString[nazwa].length;
		    dataString[nazwa][ilosc] = recommendTab[i].value;
		    if(ilosc > 0 &&  (recommendTab[i].value).length > 0){
				check = true;		    		
		    }
		    
		}
		var dataString2 = {};
		if(check){
			for(var i in recommendTab){
				 var nazwa = recommendTab[i].name;
				    if(typeof dataString2[nazwa] == 'undefined'){
				    	dataString2[nazwa] = new Array();
				    }
				    	
				    var ilosc2 = dataString2[nazwa].length;
				    dataString2[nazwa][ilosc2] = recommendTab[i].value;
				   
				if(ilosc2 > 0){
					if(check == true && recommendTab[i].name == 'recommendedLastname' && (recommendTab[i].value).length == 0){
				    		phoneStr += "Pytanie nr 7: Nazwisko nie może być puste \n";
				    }	
					if(check == true && recommendTab[i].name == 'recommendedPhone' && (recommendTab[i].value).length == 0){
					    	phoneStr += "Pytanie nr 7: Telefon nie może być pusty \n";
					}
					var W = /^[0-9]{9}$/;
					if(check == true && recommendTab[i].name == 'recommendedPhone' && !(recommendTab[i].value).match(W)){
				    	phoneStr += "Pytanie nr 7: Telefon musi posiadac 9 cyfr \n";
					}
					if(check == true && recommendTab[i].name == 'recommendFirstname' && (recommendTab[i].value).length == 0){
				    	phoneStr += "Pytanie nr 7: Imie nie może być puste \n";
				   	}
					
				}
			   
			}
		}
		
		var tekst = '';
		//validation
		if(question1 == undefined){
			tekst += "Pytanie nr 1: Niezaznoczono odpowiedzi \n";
		}if(question2 == undefined){
			tekst += "Pytanie nr 2: Niezaznoczono odpowiedzi \n";
		}if(question6 == undefined){
			tekst += "Pytanie nr 3: Niezaznoczono odpowiedzi \n";
		}if(question3 == undefined){
			tekst += "Pytanie nr 4: Niezaznoczono odpowiedzi \n";
		}if(question4 == undefined){
			tekst += "Pytanie nr 5: Niezaznoczono odpowiedzi \n";
		}if(callCenter=='NIE' && it=='NIE' && telecomunication=='NIE' && publicRelation=='NIE' && sale=='NIE'){
			tekst += "Pytanie nr 6: Niezaznoczono odpowiedzi \n";
		}if(phoneStr != ''){
			tekst += phoneStr;
		}if(question5 == undefined){
			tekst += "Pytanie nr 8: Niezaznoczono odpowiedzi \n";
		}
		if(tekst != ''){
			alert(tekst);
		}else{
			$.post(
					'saveSurveyHR.action',
					dataString,
					function (content) {
						$('#msg').html(content);
						alert("Zapisano!");
						$("#recomendContent_dialog").dialog('close');
						return false;
					}
				);
		}
		
	});
	
});
</script>

<script type="text/javascript">
		function removeRow(then) {
			$(then).parents('tr').remove();
		}
		function recommendTable_addRow() {
			var content1 = $('#recommendTable').find('.prototype').html();
			$('#recommendTable').find('.content').append('<tr class="last">'+content1+'</tr>');
			return $('#recommendTable').find('.content').find('tr.last');
		}
		
	</script>  

<div style="display: none; z-index: 1006; outline: 0px none; position: absolute; height: auto; width: 1024px; top: 100px; left: 158.5px;" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-dialog"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-dialog">Dialog Title</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a></div>
	<div id="recomendContent_dialog" title="Szczegóły" class="calendarCallback ui-dialog-content ui-widget-content" style="width: auto; min-height: 60.4px; height: auto; position: relative;" scrolltop="0" scrollleft="0">
		<%
			request.setCharacterEncoding("utf-8");
			int id_recommend = Integer.parseInt(request.getParameter("id_recommend")); 
			ResponderManager rM = new ResponderManager();
			Responder responder = rM.getResponderById_recommend(id_recommend);
			User user = (User) session.getAttribute("admin");
			PlanManager pM = new PlanManager();
			int planName = Integer.parseInt(request.getParameter("id_plan")); 
			
			String firstname = request.getParameter("firstname");
			String lastname =request.getParameter("lastname");
			
			int id_userRecommend = rM.getIdUserByIdResponder(responder.getId_responder());
		%>
		<div id="d_all">
		      <div id="d_top1">
		     		<input type="hidden" id="firstname" value="<%=firstname %>"  /> <input type="hidden" id="lastname" value="<%=lastname %>"  /> 
		     		<input type="hidden" id="phone" value="<%=request.getParameter("phone") %>"  />
		     		<input type="hidden" id="mail" value="<%=request.getParameter("mail") %>"  />
		     		<input type="hidden" id="id_userRecommend" value="<%= id_userRecommend %>">
		     		<input type="hidden" id="id_recommend" value="<%= id_recommend %>">
		     		
		             <div class="d_a" style="width: 130px;">
		              <div class="a" >Imie i nazwisko </div>
		             </div>
		             <div class="d_b" style="width: 200px;">
		                <div class="b"><%= firstname %> <%= " " %> <%=lastname  %></div>
		             </div>
		             <div class="d_a" style="width: 65px;">
		                <div class="a">Telefon</div>
		             </div>
		             <div class="d_b">
		                <div class="b"><%=request.getParameter("phone") %></div>
		             </div>
		             <div class="d_a" style="width: 65px;">
		                <div class="a">e-mail</div>
		             </div>
		             <div class="d_b">
		                <div class="b"><a style="color: white" href=""><%=request.getParameter("mail") %></a></div>
		             </div>
		        
		      </div>
		      
		      <div id="d_bottom" style="min-height: 450px;">
		        <div id="d_bottom_txt" style="margin-top: 20px;">
		        	<table style="color: black; width: 400px; font-size: 12px;" class="center">
		        		<tr>
		        			<td colspan="2" id="left" style="text-align: center;">Dane polecającego<br></td>
		        		</tr>
		        		<tr>
		        			<td id="left">Imie i nazwisko  </td>
		        			<td id="right" ><%= responder.getFirstname() %> <%= " " %> <%= responder.getLastname() %></td>
		        		</tr>
		        		<tr>
		        			<td id="left">Telefon <input type="hidden" id="phone" value="<%=responder.getPhone() %>"  /></td>
		        			<td id="right" ><%=responder.getPhone() %></td>
		        		</tr>
		        		<tr>
		        			<td id="left">Mail</td>
		        			<td id="right"><%=responder.getMail() %></td>
		        		</tr>
		        	</table>
		        
		        <div class="center" style="margin-top: 30px;"  >
		        <%if(rM.checkIfRecommendUserFillSurvey(id_recommend)){ %>	
		        
				<input type="hidden" name="id_user" id="id_user" value="<%= user.getId_user() %>" />
				<input type="hidden" name="id_plan" id="r_id_plan" value="<%=planName %>">
				<h4>Przeprowadź ankiete</h4>
				<div id="accordion" style="margin-top: 10px; height: 500px; font-size: 11px; ">
					<h3>Pytanie nr 1</h3>
					<div>
						<h1>W jakim wieku Pan/Pani jest?</h1>
				        <br/><br/>
				        <table class="center" id="r_question1" >
				        	<tr>
				                 <td width="40px" align="left"><input id="p1check1" type="radio" style="width: 20px;" name="questions.question1" value="18-20" /></td>
				                 <td><label for="p1check1">18-20 lat</label></td>
				           	</tr>
				          	<tr>
				                	<td width="40px" align="left"><input id="p1check2" type="radio" style="width: 20px;" style="width: 20px;" name="questions.question1" value="21-23" /></td>
				                    <td><label for="p1check2">21-23 lat</label></td>
				            </tr>
				            <tr>
				                   <td width="40px" align="left"><input id="p1check3" type="radio" style="width: 20px;" name="questions.question1" value="24-26" /></td>
				                   <td><label for="p1check3">24-26 lat</label></td>
				            </tr>
				            <tr>
				                  <td width="40px" align="left"><input id="p1check4" type="radio" style="width: 20px;" name="questions.question1" value="26" /></td>
				                  <td><label for="p1check4">powyżej 26 lat</label></td>
				           	</tr>
				       	</table>
					</div>
					<h3>Pytanie nr 2</h3>
					<div>
						<h1>Czy studiuje Pani / Pan, czy wybiera się Pani/ Pan na studia?</h1>
				        <br/><br/>
				        <table class="center" id="r_question2">
				        	<tr>
				              	<td width="40px" align="left"><input id="p2check1" type="radio" style="width: 20px;" name="questions.question2" value="Dziennie" /></td>
				                <td><label for="p2check1">Dziennie</label></td>
				          	</tr>
				            <tr>
				                <td width="40px" align="left"><input id="p2check2" type="radio" style="width: 20px;" name="questions.question2" value="Zaocznie" /></td>
				                <td><label for="p2check2">Zaocznie</label></td>
				          	</tr>
				            <tr>
				               	<td width="40px" align="left"><input id="p2check3" type="radio" style="width: 20px;" name="questions.question2" value="Nie studiuję" /></td>
				               	<td><label for="p2check3">Nie uczę się / nie studiuję (przejdź do pyt/ 4)</label></td>
				            </tr>
				        </table>
					</div>
					<h3>Pytanie nr 3</h3>
					<div>
						<h1>Nazwa uczelni</h1>
				        <br/><br/>
				        <table class="center" id="r_question6" >
				        	<tr>
				           		<td width="40px" align="left"><input id="p3check1" type="radio" style="width: 20px;" name="questions.question6" value="AGH" /></td>
				                <td><label for="p3check1">AGH</label></td>
				        	</tr>
				            <tr>
				                <td width="40px" align="left"><input id="p3check2" type="radio" style="width: 20px;" name="questions.question6" value="Politechnika Krakowska" /></td>
				                <td><label for="p3check2">Politechnika Krakowska</label></td>
				           	</tr>
				           	<tr>
				                <td width="40px" align="left"><input id="p3check2" type="radio" style="width: 20px;" name="questions.question6" value="Uniwersytet Jagieloński" /></td>
				                <td><label for="p3check2">Uniwersytet Jagieloński</label></td>
				           	</tr>
				           	<tr>
				                <td width="40px" align="left"><input id="p3check2" type="radio" style="width: 20px;" name="questions.question6" value="Uniwersytet Rolniczy" /></td>
				                <td><label for="p3check2">Uniwersytet Rolniczy</label></td>
				           	</tr>
				           	<tr>
				                <td width="40px" align="left"><input id="p3check2" type="radio" style="width: 20px;" name="questions.question6" value="Uniwersytet Ekonomiczny" /></td>
				                <td><label for="p3check2">Uniwersytet Ekonomiczny</label></td>
				           	</tr>
				           	<tr>
				                <td width="40px" align="left"><input id="p3check2" type="radio" style="width: 20px;" name="questions.question6" value="Krakowska Akademia" /></td>
				                <td><label for="p3check2">Krakowska Akademia</label></td>
				           	</tr>
				           	<tr>
				                <td width="40px" align="left"><input id="p3check2" type="radio" style="width: 20px;" name="questions.question6" value="Other" onclick="document.getElementById('otherUniversity').disabled = !this.checked" /></td>
				                <td>Inna <input type="text" name="other" id="otherUniversity" disabled="disabled" /></td>
				           	</tr>
				   		</table>
					</div>
					<h3>Pytanie nr 4</h3>
					<div>
						<h1>Czy pracuje Pani / Pan obecnie?</h1>
				        <br/><br/>
				        <table class="center" id="r_question3">
				        	<tr>
				           		<td width="40px" align="left"><input id="p3check1a" type="radio" style="width: 20px;" name="questions.question3" value="TAK" /></td>
				                <td><label for="p3check1a">TAK</label></td>
				        	</tr>
				            <tr>
				                <td width="40px" align="left"><input id="p3check2a" type="radio" style="width: 20px;" name="questions.question3" value="NIE" /></td>
				                <td><label for="p3check2a">NIE (przejdź do pyt/ 6)</label></td>
				           	</tr>
				   		</table>
					</div>
					<h3>Pytanie nr 5</h3>
					<div>
						<h1>Czy myślała Pani / Pan o zmianie branży?</h1>
				        	<br/><br/>
				            <table class="center" id="r_question4">
				             	<tr>
				               		<td width="40px" align="left"><input id="p4check1" type="radio" style="width: 20px;" name="questions.question4" value="TAK" /></td>
				                   	<td><label for="p4check1">TAK</label></td>
				              	</tr>
				               	<tr>
				                   	<td width="40px" align="left"><input id="p4check2" type="radio" style="width: 20px;" name="questions.question4" value="NIE" /></td>
				                   	<td><label for="p4check2">NIE </label></td>
				               	</tr>
				          	</table>
				
					</div>
					<h3>Pytanie nr 6</h3>
					<div>
						<h1>W jakiej branży chciałbyś / chciałabyś pracować?</h1>
				        <br/><br/>
				        <table class="center">
				           	<tr>
				           		<td width="40px" align="left"><input id="p5check1" type="checkbox" style="width: 20px;" style="width: 20px;" name="category.callCenter" value="TAK" /></td>
				               	<td ><label for="p5check1">Obsługa Klienta / Call Center</label></td>
				           	</tr>
				            <tr>
				              	<td width="40px" align="left"><input id="p5check2" type="checkbox" style="width: 20px;" name="category.it" value="TAK" /></td>
				             	<td><label for="p5check2">Informatyka / Programowanie</label></td>
				         	</tr>
				           	<tr>
				             	<td width="40px" align="left"><input id="p5check3" type="checkbox" style="width: 20px;" name="category.telecommunication" value="TAK" /></td>
				                <td><label for="p5check3">Telekomunikacja</label></td>
				        	</tr>
				            <tr>
				                <td width="40px" align="left"><input id="p5check4" type="checkbox" style="width: 20px;" name="category.publicRelations" value="TAK" /></td>
				              	<td><label for="p5check4">Marketing / Reklama / Public Relations</label></td>
				            </tr>
				            <tr>
				                <td width="40px" align="left"><input id="p5check5" type="checkbox" style="width: 20px;" name="category.sale" value="TAK" /></td>
				                <td><label for="p5check5">Sprzedaż</label></td>
				            </tr>
				         </table>
					</div>
					<h3>Pytanie nr 7</h3>
					<div>
					<h2>Czy byłby Pan / Pani zainteresowany / zainteresowana zaproszeniem na rozmowę kwalifikacyjną?</h2> <br>
				 	<div id="users-contain" class="ui-widget"  >
				 	
				 	<table id="recommendTable" class="ui-widget ui-widget-content"  style="text-align: center; margin-top: 20px; width: 600px;">
						<thead >
							
							<tr class="ui-widget-header ">
								<th colspan="2"></th>
								<th align="center">Imię</th>
						        <th align="center">Nazwisko</th>
						        <th align="center">Numer telefonu</th>
						        <th align="center">e-mail</th>
						        <th></th>
							</tr>
						</thead>
						<tbody class="content">
							<tr style="display:none;" class="prototype">
								<td colspan="2"></td>
								 <td><input type="text" value="" name="recommendFirstname" class="required" id="AccordionField"/></td> 
				                 <td><input type="text" value="" name="recommendedLastname" /></td>
				                 <td><input type="text" value="" name="recommendedPhone"/></td>
				                 <td><input type="text" value="" name="recommendedMail"/></td>
								<td><a title="Usuń" onclick="removeRow(this)" href="#"><img src="resources/images/delete.png" /></a></td>
											
							</tr>
							<tr >
								<td colspan="2">Osoby z polecenia</td>
								<td><input type="text" value="" name="recommendFirstname"/></td> 
				                 <td><input type="text" value="" name="recommendedLastname"/></td>
				                 <td><input type="text" value="" name="recommendedPhone"/></td>
				                 <td><input type="text" value="" name="recommendedMail"/></td>
								<td style="width: 25px;"><a title="Dodaj" onclick="recommendTable_addRow()" href="#"><img src="resources/images/add.png" /></a></td>
							</tr>
						</tbody>
					</table>
				 			 
					</div>
					</div>
					<h3>Pytanie nr 8</h3>
					<div>
						<h1>W jakim czasie Pani / Pan byłaby / byłby gotów do podjęcia pracy?</h1>
				        <br/><br/>
				        <table class="center" id="r_question5">
				           	<tr>
				             	<td width="40px" align="left"><input id="p7check1" type="radio" style="width: 20px;" name="questions.question5" value="W ciągu najbliższych 7dni"/></td>
				                <td><label for="p7check1">W ciągu najbliższych 7dni</label></td>
				            </tr>
				            <tr>
				                <td width="40px" align="left"><input id="p7check2" type="radio" style="width: 20px;" name="questions.question5" value="Do miesiąca"/></td>
				                <td><label for="p7check2">Do miesiąca</label></td>
				            </tr>
				            <tr>
				                <td width="40px" align="left"><input id="p7check3" type="radio" style="width: 20px;" name="questions.question5" value="Powyżej miesiąca" /></td>
				                <td><label for="p7check2">Powyżej miesiąca</label></td>
				           	</tr>
				      	</table>
					
					</div>
					
					<h3>Klauzula zaufania poufnosci...</h3>
					<div>
						<table class="center">
				          	<tr>
				            	<td width="40px" align="left"><input id="pyt9c" type="checkbox" style="width: 20px;" name="survey.agree" value="TAK" /> </td>
				                <td><label for="pyt9c">
				                                      "Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę mConnect z siedzibą w Krakowie, ul.Wadowicka 8A, zawartych w ankiecie oraz raporcie ankiety
				                                       dla potrzeb procesu rekrutacji zgodnie z ustawą z dnia 29/08/1997r Dz/ U/ z 2002r/, Nr 101, poz 923 ze zm/"
				
				                </label></td>
				            </tr>
				       	</table>
					</div>
					
				</div>
				<div class="center" style=" width: 420px;" >
						<div style="float: left; width: 200px;" >
							<input type="submit" value="Zapisz" id="saveSurvey"  style="width: 200px; height: 40px; background-color: #1b3c4f; color: white;"/>
						</div>
						<div style="float: left; width: 200px; margin-left: 20px;" >	
							<input id="cancelSurvey" type="submit" value="Anuluj"  style="width: 200px; height: 40px; background-color: #1b3c4f; color: white;"/>
						</div>
						
				</div>	
				
				<%}else{ %>
		  			<div class="ui-widget">
						<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
							<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
							<strong>Dany użytkownik wypełnił już ankietę</strong> </p>
						</div>
					</div>
		 		 <%} %>	
			</div>
		        
		      </div>
		    </div>
		    	
		  </div>
		  
		
	</div>
<div class="ui-resizable-handle ui-resizable-n" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-e" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 1000;"></div><div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><div class="ui-dialog-buttonset"><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Ok</span></button><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Cancel</span></button></div></div></div>
	